<template>
  <BasicModal
    v-bind="$attrs"
    :title="title"
    :helpMessage="['先选班级', '再点确认']"
    width="700px"
    :showOkBtn="false"
  >
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="班级" name="value" :rules="[{ required: true, message: '请选择班级!' }]">
        <a-select
          v-model:value="formState.value"
          style="width: 100%"
          placeholder="请选择班级"
          :options="options"
          @change="handleChange"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
        <a-button type="primary" html-type="submit" size="large">确认</a-button>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  interface FormState {
    value: string;
  }
  export default defineComponent({
    components: { BasicModal },
    props: {
      title: {
        type: String,
        default: 'Modal Title',
      },
      options: {
        type: Array,
        default: () => [],
      },
    },
    setup() {
      const handleChange = (id) => {
        // console.log(`selected ${title}`);
        console.log(`selected ${id}`);
      };
      const formState = reactive<FormState>({
        value: '',
      });
      const goIframes = function (values) {
        window.open('http://jojo.web.cloudendpoint.cn/?id=' + values);
      };
      const onFinish = (values: any) => {
        console.log('Success:', values);
        goIframes(values.value);
      };

      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
      return {
        formState,
        onFinish,
        onFinishFailed,
        handleChange,
      };
    },
  });
</script>
